@use 'sass:math';
@import './config.scss';

%abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

%fsr {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

%page {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0;
}

@mixin thumb($thumb_size) {
    &::-webkit-scrollbar {
        display: block;
        width: $thumb_size;
    }

    &::-webkit-scrollbar-button {
        display: none;
    }

    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-track-piece {
        // Make the track transparent
        background-color: rgba($white, 0);
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba($black, 1);
    }

   
}

// $no-break: 0;
// $sm-break: 480px;
// $md-break: 768px;
// $lg-break: 1024px;
// $xl-break: 1440px;

@mixin bp($size) {
    @if $size == xxl {
        @media (min-width: $xl-break) {
            @content;
        }
    } @else if $size == xl {
        @media (min-width: $lg-break) {
            @content;
        }
    } @else if $size == lg {
        @media (min-width: $md-break) {
            @content;
        }
    } @else if $size == md {
        @media (min-width: $sm-break) {
            @content;
        }
    } @else if $size == sm {
        @media (max-width: $sm-break) {
            @content;
        }
    } @else if $size == m-only {
        @media (min-width: $sm-break) and (max-width: $md-break) {
            @content;
        }
    } @else if $size == l-only {
        @media (min-width: $md-break) and (max-width: $lg-break) {
            @content;
        }
    } @else if $size == xl-only {
        @media (min-width: $lg-break) and (max-width: $xl-break) {
            @content;
        }
    }
}

@mixin ratio-buddy($width, $height) {
    position: relative;
    display: block;

    &:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: math.div($height, $width) * 100%;
    }

    > .inner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}
